.layui-layim-chat{
  .icon-img, .icon-svg {
    display: inline-block;
    background: no-repeat center;
    background-size: contain;
    vertical-align: sub;
  }
  .user-gender{
    position: absolute;
    left: 50px;
    width: 18px;
    height: 18px;
    bottom: 3px;
    background: #58bcf6;
    border-radius: 50%;
    border: 2px solid #fff;
    line-height: 15px;
    text-align: center;
    z-index: 10;
    .icon-svg {
      position: absolute;
      width: 16px;
      height: 16px;
      top: 50%;
      left: 50%;
      margin-top: -8px;
      margin-left: -8px;
    }
  }
  .female {
    background: #f658eb;
  }
  .icon-male-white {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2214%22%20viewBox%3D%220%200%2016%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EShape%3C%2Ftitle%3E%3Cpath%20d%3D%22M14.387.69L10.503.403a.768.768%200%200%200-.827.697.763.763%200%200%200%20.71.81l2.049.153-1.982%201.826a5.832%205.832%200%200%200-2.496-1.25C4.827%201.918%201.685%203.833.954%206.904c-.732%203.071%201.22%206.153%204.35%206.87%203.131.718%206.273-1.197%207.004-4.268a5.611%205.611%200%200%200-.775-4.391L13.4%203.404l-.146%201.792a.763.763%200%200%200%20.707.814.769.769%200%200%200%20.83-.694l.31-3.808a.773.773%200%200%200-.714-.818zM10.63%209.124c-.515%202.163-2.728%203.512-4.934%203.007-2.205-.506-3.58-2.677-3.065-4.84.515-2.164%202.728-3.513%204.934-3.007%202.206.505%203.58%202.676%203.065%204.84z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
    width: 16px;
    height: 14px;
  }
  .icon-female-white {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2216%22%20height%3D%2215%22%20viewBox%3D%220%200%2016%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3EShape%3C%2Ftitle%3E%3Cpath%20d%3D%22M9.251%2010.898a4.155%204.155%200%200%201-4.147-4.154A4.156%204.156%200%200%201%209.25%202.591a4.155%204.155%200%200%201%200%208.307M3.335%206.744c0%201.169.339%202.259.924%203.178l-.936.937-.854-.854a.886.886%200%200%200-1.254%200L1.22%2010a.889.889%200%200%200%200%201.256l.853.855-.993.994a.889.889%200%200%200%200%201.256l-.003-.003a.886.886%200%200%200%201.254%200l.993-.995.771.773a.886.886%200%200%200%201.254%200l-.003.003a.89.89%200%200%200%200-1.256l-.771-.772.85-.852a5.886%205.886%200%200%200%203.827%201.41c3.263%200%205.918-2.658%205.917-5.926%200-3.267-2.654-5.925-5.917-5.925-3.262%200-5.916%202.658-5.916%205.925%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
    width: 16px;
    height: 15px;
  }
}